<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, user-scalable=no" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        
        <link rel="stylesheet" type="text/css" href="../../css/lib/jquery/jquery.mobile-1.4.3.css" />
        
        <script type="text/javascript" charset="utf-8" src="../../js/lib/alopex/alopex_controller.js"></script>
        <script type="text/javascript" charset="utf-8" src="../../js/lib/jquery/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="../../js/lib/jquery/jquery.mobile-1.4.3.js"></script>
        <script type="text/javascript" charset="utf-8" src="../../js/app/apiTest/contact_detail_biz.js"></script>
        <script type="text/javascript" charset="utf-8" src="../../js/app/common/common.js"></script>
    </head>
    <body>
        <div id="titleBarText" data-role="header" class="ui-bar-b">
            <a id="titleBarBackButton" data-role="button">Back</a>
            <h1>Contact Details</h1>
            <a id="titleBarHomeButton" data-role="button">Home</a>
        </div>
        <div id="contactHeader" data-role="header" data-theme="c">
            <a id="editButton" data-role="button" data-theme="e" class="ui-btn-right">Edit</a>
            <h1>Contact Details</h1>
        </div>
        <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
            <label for="firstName" class="ui-input-text"> First Name</label> 
            <input type="text" name="firstName" id="firstName" disabled="disabled" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset">
        </div>
        <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
            <label for="lastName" class="ui-input-text">Last Name</label>
            <input type="text" name="lastName" id="lastName" disabled="disabled" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset">
        </div>
        <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
            <label for="mobilePhone" class="ui-input-text">Mobile Phone</label>
            <input type="tel" name="mobilePhone" id="mobilePhone" disabled="disabled" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset">
        </div>
        <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
              <label for="workPhone " class="ui-input-text">Work Phone</label>
              <input type="tel" name="workPhone" id="workPhone" disabled="disabled" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset">
        </div>
        <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
            <label for="email" class="ui-input-text">Email</label>
            <input type="email" name="email" id="email" disabled="disabled" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset">
        </div>
        <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
            <label for="organization" class="ui-input-text">Organization</label>
            <input type="text" name="organization" id="organization" disabled="disabled" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset">
        </div>
        <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
            <label for="department" class="ui-input-text">Department</label>
            <input type="text" name="departmentName" id="department" disabled="disabled" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset">
        </div>
        <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
            <label for="jobTitle" class="ui-input-text">Job Title</label>
            <input type="text" name="jobTitle" id="jobTitle" disabled="disabled" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset">
        </div>
    </body>
</html>